<template>
  <h3>展示中心</h3>
  <p>
    <a-space direction="vertical">
      <!--    <input type="text" placeholder="城市 默认北京" v-model="city">-->
      <!--    <button @click="get_weather">搜索</button>-->
      <!--    <a-button type="primary" @click="get_weather">搜索</a-button>-->
      <a-input-search
          v-model:value="city"
          placeholder="北京"
          enter-button="Search"
          size="large"
          @search="get_weather"
      />
    </a-space>
  </p>
  <!--
    <table v-if="weather_list.length>1">
      <tr>
        <th>日期</th>
        <th>天气</th>
        <th>温度</th>
        <th>风向 - 风力</th>
      </tr>
      <tr v-for="weather in weather_list">
        <td>{{ weather.date }}</td>
        <td>{{ weather.text_day }}</td>
        <td>低温 {{ weather.low }} ~ 高温 {{ weather.high }}</td>
        <td>{{ weather.wind_direction }} - {{ weather.wind_speed }}</td>
      </tr>
    </table>
    <hr>
    -->
  <a-row>
    <a-col :span="16" :offset="4">
      <a-table :columns="columns" :data-source="data">
        <template #bodyCell="{ column, text }">
          <template v-if="column.dataIndex === 'name'">
            <a>{{ text }}</a>
          </template>
        </template>
      </a-table>
    </a-col>
  </a-row>
  <a-row>
    <a-col :span="12">
      <div class="chart" ref="chart01">
      </div>
    </a-col>
    <a-col :span="12">
      <div class="chart" ref="chart02">
      </div>
    </a-col>
  </a-row>

</template>

<script>
import axios from "axios"
import * as echarts from 'echarts';
import {ref} from 'vue'

export default {
  name: "ShowCenter",
  setup() {
    const value = ref();
    return {
      value,
    };
  },

  data() {
    return {
      weather_list: [],
      city: '北京',
      columns: [
        {
          title: '日期',
          dataIndex: 'date',
          key: 'date',
        },
        {
          title: '天气',
          dataIndex: 'text_day',
          key: 'text_day',
          // width: 100,
        },
        {
          title: '最高温',
          dataIndex: 'high',
          key: 'high',
          ellipsis: true,
        },
        {
          title: '最低温',
          dataIndex: 'low',
          key: 'low',
          ellipsis: true,
        },
        {
          title: '风向',
          dataIndex: 'wind_direction',
          key: 'wind_direction',
          ellipsis: true,
        },
        {
          title: ' 风力',
          dataIndex: 'wind_speed',
          key: 'wind_speed',
          ellipsis: true,
        },
      ],
      data: [],

    }
  },
  methods: {
    get_weather() {
      console.log("showCenter token:::", this.$store.getters.token)
      axios.get("https://api.seniverse.com/v3/weather/daily.json",
          {
            params: {
              key: 'SCYrvkytJze9qyzOh',
              language: 'zh-Hans',
              unit: 'c',
              location: this.city,
            }
          }
      ).then(
          (response) => {
            // console.log(this.$settings.host)
            // console.log("response", response.data.results[0].daily)
            this.weather_list = response.data.results[0].daily
            this.data = response.data.results[0].daily
          }
      )
    },
    chart01() {
      // var chartDom = document.getElementById('main');
      var myChart = echarts.init(this.$refs.chart01);
      var option;
      // console.log(this.$refs.chart01)
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        series: [
          {
            name: 'Direct',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [320, 302, 301, 334, 390, 330, 320]
          },
          {
            name: 'Mail Ad',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Affiliate Ad',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'Video Ad',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [150, 212, 201, 154, 190, 330, 410]
          },
          {
            name: 'Search Engine',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320]
          }
        ]
      };

      option && myChart.setOption(option);
    },
    chart02() {
      var myChart = echarts.init(this.$refs.chart02);
      var option;
      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1048, name: 'Search Engine'},
              {value: 735, name: 'Direct'},
              {value: 580, name: 'Email'},
              {value: 484, name: 'Union Ads'},
              {value: 300, name: 'Video Ads'}
            ]
          }
        ]
      };

      option && myChart.setOption(option);
    },
  },

  mounted() {
    this.get_weather();
    this.chart01();
    this.chart02();
  }
}
</script>

<style scoped>
/*

table {
  width: 800px;
  border-collapse: collapse;

}

td, th {
  border: 1px solid red;
}
*/

.chart {
  height: 500px;
}

</style>